<template>
	<view class="home-bg">
		<!-- 顶部栏 -->
		<view class="home-header">
			<view class="header-left">
				<image src="/static/yyq/menu.png" class="header-icon" />
			</view>
			<view class="header-title">首页</view>
			<view class="header-right">
				<image src="/static/yyq/more.png" class="header-icon" />
				<image src="/static/yyq/circle.png" class="header-icon" />
			</view>
		</view>
		<!-- 定位栏 -->
		<view class="home-location-bar">
			<image src="/static/yyq/location.png" class="location-icon" />
			<text class="location-text">焦作市山阳区人民路32号</text>
			<view class="location-refresh">
				<image src="/static/yyq/refresh.png" class="refresh-icon" />
				<text class="refresh-text">刷新</text>
			</view>
		</view>
		<!-- 功能区 -->
		<view class="home-card home-func-card">
			<view class="func-list">
				<view class="func-item" v-for="item in funcList" :key="item.text">
					<image :src="item.icon" class="func-icon" />
					<view class="func-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<!-- 附近加油站 -->
		<view class="home-card home-section">
			<view class="section-header">
				<view class="section-title">附近加油站</view>
				<view class="section-more">更多 &gt;</view>
			</view>
			<view class="section-desc">根据您的位置推荐最近的加油站</view>
			<image src="/static/yyq/map.png" class="map-img" mode="widthFix" />
		</view>
		<!-- 优惠团购 -->
		<view class="home-card home-section">
			<view class="section-header">
				<view class="section-title">优惠团购</view>
				<view class="section-more">更多 &gt;</view>
			</view>
			<view class="section-desc">钜惠袭来 为您的爱车续航</view>
			<view class="group-list">
				<view class="group-item" v-for="(item, idx) in groupList" :key="idx">
					<image :src="item.img" class="group-img" mode="aspectFill" />
					<view class="group-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="home-tabbar">
			<view class="tabbar-item active">
				<image src="/static/yyq/tab_home.png" class="tabbar-icon" />
				<view class="tabbar-text">首页</view>
			</view>
			<view class="tabbar-item">
				<image src="/static/yyq/tab_service.png" class="tabbar-icon" />
				<view class="tabbar-text">服务</view>
			</view>
			<view class="tabbar-item">
				<image src="/static/yyq/tab_my.png" class="tabbar-icon" />
				<view class="tabbar-text">我的</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const funcList = ref([
	{ icon: '/static/yyq/repair.png', text: '车辆维修' },
	{ icon: '/static/yyq/maintain.png', text: '汽车保养' },
	{ icon: '/static/yyq/wash.png', text: '专业洗车' },
	{ icon: '/static/yyq/oil.png', text: '就近加油' },
]);
const groupList = ref([
	{ img: '/static/yyq/group1.jpg', title: '汽车惠民活动走进……' },
	{ img: '/static/yyq/group2.jpg', title: '汽车惠民活动走进……' },
	{ img: '/static/yyq/group3.jpg', title: '汽车惠民活动走进……' },
]);
</script>

<style scoped lang="scss">
.home-bg {
	min-height: 100vh;
	background: linear-gradient(180deg, #338aff 0%, #338aff 220px, #f5f6fa 220px, #f5f6fa 100%);
	padding-bottom: 90px;
}
.home-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 16px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.header-title {
	flex: 1;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}
.header-icon {
	width: 28px;
	height: 28px;
	margin: 0 4px;
}
.home-location-bar {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 32px;
	margin: 0 24px;
	margin-top: 8px;
	padding: 8px 20px;
	box-shadow: 0 2px 8px rgba(51,138,255,0.08);
}
.location-icon {
	width: 22px;
	height: 22px;
	margin-right: 8px;
}
.location-text {
	flex: 1;
	color: #338aff;
	font-size: 16px;
	font-weight: bold;
}
.location-refresh {
	display: flex;
	align-items: center;
	color: #338aff;
	font-size: 15px;
}
.refresh-icon {
	width: 16px;
	height: 16px;
	margin-right: 2px;
}
.refresh-text {
	color: #338aff;
}
.home-card {
	background: #fff;
	border-radius: 20px;
	margin: 18px 16px 0 16px;
	box-shadow: 0 2px 8px rgba(51,138,255,0.04);
}
.home-func-card {
	padding: 24px 0 12px 0;
}
.func-list {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.func-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.func-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
}
.func-text {
	font-size: 16px;
	color: #333;
	font-weight: bold;
}
.home-section {
	padding: 18px 0 18px 0;
}
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}
.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #222;
}
.section-more {
	color: #888;
	font-size: 15px;
}
.section-desc {
	color: #888;
	font-size: 14px;
	margin: 8px 20px 12px 20px;
}
.map-img {
	width: 100%;
	border-radius: 12px;
	margin-top: 4px;
}
.group-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 12px 8px 12px;
}
.group-item {
	width: 46%;
	margin: 2%;
	background: #f5f6fa;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.group-img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
}
.group-title {
	font-size: 15px;
	color: #333;
	padding: 8px 12px 12px 12px;
}
.home-tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 70px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0 -2px 8px rgba(51,138,255,0.04);
	z-index: 100;
}
.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 13px;
}
.tabbar-item.active {
	color: #ff9800;
}
.tabbar-icon {
	width: 32px;
	height: 32px;
	margin-bottom: 2px;
}
.tabbar-text {
	font-size: 13px;
}
</style>
